<template>
  <div class="model-showcase">
    <!-- 使用 NavBar 组件并保持原有样式 -->
    <NavBar
      :is-logged-in="isLoggedIn"
      @login="handleLogin"
      @go-to-console="goToConsole"
      @toggle-theme="toggleTheme"
      :theme-icon="themeIcon"
    />

    <!-- 页面标题 - 修改为白色背景带边框 -->
    <div class="page-header">
      <div class="header-content">
        <h1>探索广西区分行精选<span class="ai-text">AI模型</span></h1>
        <p>探索各种先进的AI模型，满足不同应用场景需求，快速构建智能应用</p>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧筛选栏 -->
      <div class="filter-sidebar">
        <div class="sidebar-section">
          <h3>模型筛选</h3>

          <div class="filter-group">
            <h4>模型类型</h4>
            <div class="button-options">
              <button
                v-for="type in dynamicModelTypes"
                :key="type"
                :class="{ active: selectedModelTypes.includes(type) }"
                @click="toggleModelType(type)"
                class="filter-button"
              >
                {{ type }}
              </button>
            </div>
          </div>

          <div class="filter-group">
            <h4>类别</h4>
            <div class="button-options">
              <button
                v-for="category in dynamicCategories"
                :key="category"
                :class="{ active: selectedCategories.includes(category) }"
                @click="toggleCategory(category)"
                class="filter-button"
              >
                {{ category }}
              </button>
            </div>
          </div>

          <div class="filter-group">
            <h4>适用场景</h4>
            <div class="button-options">
              <button
                v-for="scenario in dynamicScenarios"
                :key="scenario"
                :class="{ active: selectedScenarios.includes(scenario) }"
                @click="toggleScenario(scenario)"
                class="filter-button"
              >
                {{ scenario }}
              </button>
            </div>
          </div>

        </div>
      </div>

      <!-- 右侧模型卡片区域 -->
      <div class="models-container">
        <div class="models-header">
          <div class="models-count">
            <span class="count-number">{{ filteredModels.length }}</span>个模型
          </div>
          <div class="search-box">
            <div class="search-input-wrapper">
              <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="#6B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M21 21L16.65 16.65" stroke="#6B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
              <input
                type="text"
                v-model="searchQuery"
                placeholder="搜索模型名称..."
                class="search-input"
              >
            </div>
          </div>
        </div>

        <!-- 筛选状态显示 -->
        <div class="filter-status-bar" v-if="hasActiveFilters">
          <button class="clear-filters-btn" @click="clearFilters">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 6L6 18M6 6l12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
            清除筛选
          </button>
        </div>

        <div class="models-grid">
          <div
            v-for="model in filteredModels"
            :key="model.id"
            class="model-card"
            :class="{'has-deployment': model.supportDeployment}"
            @click="handleCardClick(model)"
          >
            <!-- 热门标签 -->
            <div class="card-tags-container">

              <div v-if="model.isHot" class="hot-label">热门</div>

              <span v-if="model.supportDeployment" class="deployment-tag">
                支持部署
              </span>
            </div>
            <!-- 卡片顶部：紧凑布局 -->
            <div class="card-top">
              <div class="model-header">
                <div class="model-basic-info">
                  <!-- 修改图标显示逻辑：支持图片路径和字母两种方式 -->
                  <div v-if="model.logoPath" class="model-logo-image">
                    <img :src="model.logoPath" :alt="model.name" />
                  </div>
                  <div v-else class="model-logo" :class="getLogoColorClass(model.id)">
                    {{ model.logo }}
                  </div>
                  <div class="model-title-section">
                    <h3 class="model-name">  {{ model.name }}</h3>
                  </div>

                </div>
              </div>
            </div>

            <!-- 卡片中部：应用场景标签 -->
            <div class="card-middle">
              <div class="scenarios-section">
                <div class="scenarios-tags">
                  <span class="model-type-tag">{{ model.modelType }}</span>
                  <span class="model-type-tag">{{ model.type }}</span>
                  <span
                    v-for="scenario in getDisplayScenarios(model.scenarios)"
                    :key="scenario"
                    class="scenario-tag"
                  >
                    {{ scenario }}
                  </span>
                  <span v-if="model.scenarios.length > 3" class="more-scenarios">
                    +{{ model.scenarios.length - 3 }}个
                  </span>
                </div>
              </div>
            </div>

            <!-- 卡片底部：描述和立即探索按钮 -->
            <div class="card-bottom">
              <p class="model-description">{{ model.description }}</p>
              <div class="description-footer">
                <button class="explore-button" @click.stop="handleExplore(model)">
                  立即探索
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 无结果状态 -->
        <div class="no-results" v-if="filteredModels.length === 0">
          <div class="no-results-content">
            <svg width="64" height="64" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 21L-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" stroke="#9CA3AF" stroke-width="2"/>
            </svg>
            <h3>未找到匹配的模型</h3>
            <p>请尝试调整筛选条件或搜索关键词</p>
            <button class="clear-filters-btn large" @click="clearFilters">清除所有筛选</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 使用 Footer 组件 -->
    <Footer />
  </div>
</template>

<script>
import NavBar from '@/layout/UserView/NavBar.vue'
import Footer from '@/layout/UserView/Footer.vue'

export default {
  name: "LanguageModels",
  components: {
    NavBar,
    Footer
  },
  props: {
    presetFilter: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      isLoggedIn: false,
      themeIcon: 'light',
      searchQuery: '',
      selectedModelTypes: [],
      selectedCategories: [],
      selectedScenarios: [],
      selectedProviders: [],

      // 预设筛选配置
      presetFilters: {
        traditional_ml: {
          selectedModelTypes: ['传统机器学习'],
        },
        deep_learning: {
          selectedModelTypes: ['深度学习模型'],
        },
        classical_stats: {
          selectedModelTypes: ['经典统计模型'],
        },
        pretrained: {
          selectedModelTypes: ['预训练模型'],
        },
        generative_ai: {
          selectedModelTypes: ['大模型'],
        }
      },
      models: [
        {
          "id": 1,
          "name": "SARIMA",
          "logo": "S",
          "modelType": "经典统计模型",
          "type": "预测分析",
          "scenarios": ["时序预测", "季节性分析"],
          "supportDeployment": true,
          "description": "季节性自回归积分滑动平均模型，能够同时捕捉数据的长期趋势和季节性规律，特别适合具有明显周期性波动的金融和经济时间序列预测。",
          "company": "学术界",
          "versions": "多种变体",
          "color": "flat-green",
          "isHot": true,
        },
        {
          "id": 2,
          "name": "通义万相2.1",
          "logo": "万",
          "logoPath": "/img/tywx-logo.png",
          "modelType": "大模型",
          "type": "多模态",
          "scenarios": ["视频生成", "图像生成"],
          "supportDeployment": true,
          "description": "阿里云开源的高质量视频生成模型，支持文生视频、图生视频等多种任务，在VBench评测中以86.22%得分领先，具备复杂运动模拟和物理规律遵循能力，支持中英文文本生成。",
          "company": "阿里云",
          "versions": "开源",
          "color": "flat-blue",
          "isHot": false
        },
        {
          "id": 3,
          "name": "百度蒸汽机 2.0",
          "logo": "蒸",
          "logoPath": "/img/bdzqj-logo.png",
          "modelType": "大模型",
          "type": "多模态",
          "scenarios": ["音视频生成", "视频创作"],
          "supportDeployment": true,
          "description": "百度推出的音视频一体化生成模型，实现人物口型、表情、动作的毫秒级同步，支持多人对话生成，在VBench图生视频榜单以89.38%总分登顶，深度优化中文场景。",
          "company": "百度",
          "versions": "API调用",
          "color": "flat-red",
          "isHot": false
        },
        {
          "id": 4,
          "name": "GLM-4.5V",
          "logo": "G",
          "logoPath": "/img/GLM-logo.png",
          "modelType": "大模型",
          "type": "多模态",
          "scenarios": ["视觉推理", "文档理解"],
          "supportDeployment": true,
          "description": "智谱开源的视觉推理模型，总参数106B，在41个公开多模态任务中达到SOTA性能，支持图像、视频、文档理解和GUI Agent任务，具备64K长上下文处理能力。",
          "company": "智谱",
          "versions": "开源",
          "color": "flat-orange",
          "isHot": false
        },
        {
          "id": 5,
          "name": "Transformer",
          "logo": "T",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["多变量预测", "趋势分析"],
          "supportDeployment": true,
          "description": "基于注意力机制的先进架构，擅长处理序列数据和多变量关联分析，在长期依赖关系捕捉方面表现卓越。",
          "company": "Google",
          "versions": "多种变体",
          "color": "flat-purple",
          "isHot": true,
          // 新增详情页字段
        },

        {
          "id": 6,
          "name": "Informer",
          "logo": "I",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["长期预测", "高效计算"],
          "supportDeployment": true,
          "description": "专为长序列时间序列预测设计的高效Transformer变体，通过注意力机制和蒸馏技术，在保持高精度的同时大幅降低计算复杂度。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-light-blue",
          "isHot": true
        },
        {
          "id": 39,
          "name": "DeepSeek V3.2",
          "logo": "D",
          "logoPath": "/img/deepseek-logo.png", // 示例：有图片路径的模型
          "modelType": "大模型",
          "type": "语言模型",
          "scenarios": ['文本生成', '语义理解'],
          "supportDeployment": true,
          "description": "DeepSeek-V3.2引入稀疏注意力机制(DSA)，大幅提升长文本处理效率，特别适合经济报告、财经新闻等长文档分析", "company": "学术界",
          "versions": "开源",
          "color": "flat-cyan",
          "isHot": true
        },
        {
          "id": 40,
          "name":"ERNIE4.5",
          "logo": "E",
          "logoPath": "/img/ERNIE-logo.png", // 示例：有图片路径的模型
          "modelType": "大模型",
          "type": "多模态",
          "scenarios": ['视觉理解', '图像识别'],
          "supportDeployment": true,
          "description": "多模态大模型，在理解经济图表、数据可视化方面具有突出能力，支持图文联合推理。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-cyan",
          "isHot": true
        },
        {
          "id": 41,
          "name":"Kimi-K2-Instruct",
          "logo": "K",
          "logoPath": "/img/kimi-logo.png",
          "modelType": "大模型",
          type: '多模态',
          scenarios: ['文本生成', '语义理解'],
          "supportDeployment": true,
          description: '国内首个开源万亿参数MoE模型，具有卓越的编码和工具调用能力，特别适合复杂经济问题推理和政策分析。',
          "company": "学术界",
          "versions": "开源",
          "color": "flat-cyan",
          "isHot": true
        },
        {
          "id": 7,
          "name": "TimesNet",
          "logo": "T",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["多周期分析", "长期趋势预测"],
          "supportDeployment": true,
          "description": "基于CNN的2D架构时间序列分析模型，通过将一维序列转换为二维张量有效捕捉周期内和周期间变化，在多重周期性时间序列预测中表现卓越。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-lime",
          "isHot": true
        },

        {
          "id": 9,
          "name": "DeepAR",
          "logo": "D",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["概率预测", "不确定性量化"],
          "supportDeployment": true,
          "description": "擅长风险管控，提供未来值的概率分布而不仅仅是单一预测点。",
          "company": "Amazon",
          "versions": "开源",
          "color": "flat-deep-orange",
          "isHot": false
        },
        {
          "id": 10,
          "name": "N-BEATS",
          "logo": "N",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["可解释预测", "趋势分解"],
          "supportDeployment": true,
          "description": "善于解构问题，通过双重残差栈结构逐步分解时序成分。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-indigo",
          "isHot": false
        },
        {
          "id": 11,
          "name": "PatchTST",
          "logo": "P",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["多变量预测", "高效计算"],
          "supportDeployment": true,
          "description": "擅长化整为零，将长时间序列分割成片段处理，在保持预测精度的同时提升计算效率。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-light-green",
          "isHot": false
        },
        {
          "id": 12,
          "name": "Crossformer",
          "logo": "C",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["多变量关联分析", "宏观预测"],
          "supportDeployment": true,
          "description": "擅长多变量关联分析，深入分析多变量时间序列中各个维度之间的相互依赖关系。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-amber",
          "isHot": false
        },
        {
          "id": 13,
          "name": "TimesFM",
          "logo": "T",
          "modelType": "预训练模型",
          "type": "预测分析",
          "scenarios": ["零样本预测", "不确定性量化"],
          "supportDeployment": true,
          "description": "模型经过海量数据训练，即使在缺乏历史数据的新指标预测上也能展现强大能力。",
          "company": "Google",
          "versions": "开源",
          "color": "flat-red",
          "isHot": false
        },
        {
          "id": 50,
          "name": "Chronos",
          "logo": "C",
          "modelType": "预训练模型",
          "type": "预测分析",
          "scenarios": ["零样本学习", "多领域适配"],
          "supportDeployment": true,
          "description": "基于大语言模型架构的时间序列预测模型，支持零样本学习，无需特定领域训练即可适应多种预测任务。",
          "company": "Amazon",
          "versions": "多个尺寸",
          "color": "flat-pink",
          "isHot": true
        },
        {
          "id": 15,
          "name": "Lag-Llama",
          "logo": "L",
          "modelType": "预训练模型",
          "type": "预测分析",
          "scenarios": ["概率预测", "风险评估"],
          "supportDeployment": true,
          "description": "基于强大架构不仅提供点预测，更擅长输出未来值的概率分布，帮助量化不确定性。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-brown",
          "isHot": false
        },
        {
          "id": 49,
          "name": "Moirai",
          "logo": "M",
          "modelType": "预训练模型",
          "type": "预测分析",
          "scenarios": ["多变量预测", "宏观分析"],
          "supportDeployment": true,
          "description": "统一的多变量时间序列预测基础模型，能够同时处理大量相关时间序列并捕捉变量间的复杂动态关系。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-blue-grey",
          "isHot": true
        },
        {
          "id": 17,
          "name": "TimeDiff",
          "logo": "T",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["概率预测", "情景生成"],
          "supportDeployment": true,
          "description": "擅长数据模拟，能一次性生成未来整个数据序列，避免误差累积。",
          "company": "学术界",
          "versions": "多种变体",
          "color": "flat-purple",
          "isHot": false
        },
        {
          "id": 18,
          "name": "LightTS",
          "logo": "L",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["资源受限", "快速分析"],
          "supportDeployment": true,
          "description": "设计轻量，响应速度快，适合在计算资源有限的环境中快速得出预测分析结果。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-light-blue",
          "isHot": false
        },
        {
          "id": 19,
          "name": "TSMixer",
          "logo": "T",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["轻量级预测", "多变量时序"],
          "supportDeployment": true,
          "description": "结构简单训练快，适合处理多变量时间序列的轻量级实时预测任务。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-cyan",
          "isHot": false
        },
        {
          "id": 21,
          "name": "MICN",
          "logo": "M",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["多周期分析", "波动研究"],
          "supportDeployment": true,
          "description": "善于多尺度观察，同时捕捉时间序列的局部细节和全局整体特征。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-indigo",
          "isHot": false
        },
        {
          "id": 23,
          "name": "TimePro",
          "logo": "T",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["实时监控", "风险预警"],
          "supportDeployment": true,
          "description": "基于先进架构，具备高效计算能力，适合需要快速响应的实时监控场景。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-deep-orange",
          "isHot": false
        },
        {
          "id": 24,
          "name": "MOMENT",
          "logo": "M",
          "modelType": "预训练模型",
          "type": "模式识别",
          "scenarios": ["迁移学习", "多任务分析"],
          "supportDeployment": true,
          "description": "通过多任务预训练学习时间序列的通用表示，可轻松适配分类、预测等多种任务。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-blue",
          "isHot": false
        },
        {
          "id": 25,
          "name": "ChatTS",
          "logo": "C",
          "modelType": "预训练模型",
          "type": "模式识别",
          "scenarios": ["智能分析", "复杂推理"],
          "supportDeployment": true,
          "description": "能够理解自然语言指令并与时间序列数据对话，支持复杂问题的因果推理。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-purple",
          "isHot": false
        },
        {
          "id": 27,
          "name": "TCN",
          "logo": "T",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["长序列分析", "因果推理"],
          "supportDeployment": true,
          "description": "擅长逻辑推理，利用因果卷积确保时间顺序，同时具备并行处理能力。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-cyan",
          "isHot": false
        },
        {
          "id": 28,
          "name": "Autoformer",
          "logo": "A",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["长期预测", "季节性数据"],
          "supportDeployment": true,
          "description": "善于捕捉周期的规律，深度挖掘时间序列中的季节性模式。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-cyan",
          "isHot": false
        },
        {
          "id": 29,
          "name": "Pyraformer",
          "logo": "P",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["多层时序分析", "周期研究"],
          "supportDeployment": true,
          "description": "善于从宏观到微观观察，通过金字塔式结构，高效捕捉不同时间尺度上的周期依赖关系。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-teal",
          "isHot": false
        },
        {
          "id": 30,
          "name": "iTransformer",
          "logo": "I",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["多变量预测", "逆序架构"],
          "supportDeployment": true,
          "description": "善于反向思考，采用独特的逆序设计，在多变量预测任务上展现出强大潜力。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-orange",
          "isHot": false
        },
        {
          "id": 31,
          "name": "XGBoost",
          "logo": "X",
          "modelType": "传统机器学习",
          "type": "预测分析",
          "scenarios": ["数据分类", "回归预测"],
          "supportDeployment": true,
          "description": "通过梯度提升决策树不断修正错误，构建高精度模型，在表格数据任务中表现卓越。",
          "company": "学术界/产业界",
          "versions": "开源",
          "color": "flat-green",
          "isHot": true
        },
        {
          "id": 32,
          "name": "支持向量机 ",
          "logo": "S",
          "modelType": "传统机器学习",
          "type": "模式识别",
          "scenarios": ["文本分类",   "模式识别"],
          "supportDeployment": true,
          "description": "致力于在复杂数据空间中寻找最优分类边界，尤其擅长处理高维问题。",
          "company": "学术界/产业界",
          "versions": "多种核函数",
          "color": "flat-purple",
          "isHot": false
        },
        {
          "id": 33,
          "name": "k-means",
          "logo": "K",
          "modelType": "传统机器学习",
          "type": "模式识别",
          "scenarios": ["聚类分析", "主题发现"],
          "supportDeployment": true,
          "description": "根据数据内在特征的相似性，将样本快速分群，揭示数据潜在结构。",
          "company": "学术界/产业界",
          "versions": "经典算法",
          "color": "flat-orange",
          "isHot": false
        },

        {
          "id": 37,
          "name": "Sundial",
          "logo": "S",
          "modelType": "预训练模型",
          "type": "预测分析",
          "scenarios": ["零样本概率预测", "不确定性量化"],
          "supportDeployment": true,
          "description": "基于流匹配技术，无需微调即可在零样本情况下提供准确且带置信区间的预测。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-amber",
          "isHot": false
        },
        {
          "id": 38,
          "name": "TimePro",
          "logo": "T",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["长期预测", "多变量预测"],
          "supportDeployment": true,
          "description": "通过超状态重构精准捕捉变量间复杂的延迟效应和动态关系。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-cyan",
          "isHot": false
        },


        {
          "id": 45,
          "name": "FLUX.1-schnell",
          "logo": "F",
          "logoPath": "/img/FLUX-logo.png",
          "modelType": "大模型",
          "type": "多模态",
          "scenarios": ["图像生成", "创意设计"],
          "supportDeployment": true,
          "description": "高性能图像生成模型，支持文本到图像生成，具有快速推理能力和高质量的图像生成效果，适用于创意设计和艺术创作场景。",
          "company": "Black-forest-Lab",
          "versions": "开源",
          "color": "flat-purple",
          "isHot": false
        },
        {
          "id": 46,
          "name": "九章大模型 1.0",
          "logo": "九",
          "logoPath": "/img/JZ-logo.png",
          "modelType": "大模型",
          "type": "专业模型",
          "scenarios": ["数学解题", "科学计算"],
          "supportDeployment": true,
          "description": "专注于数学领域的AI大模型，具备强大的数学推理和解题能力，支持复杂的数学计算和理论证明，为数学教育和研究提供专业工具。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-green",
          "isHot": false
        },

        {
          "id": 47,
          "name": "ARIMA",
          "logo": "A",
          "modelType": "经典统计模型",
          "type": "预测分析",
          "scenarios": ["时序预测", "指标分析"],
          "supportDeployment": true,
          "description": "擅长从历史数据本身寻找规律，适合用于预测具有稳定趋势的指标，如CPI、货币供应量等。",
          "company": "学术界",
          "versions": "多种参数组合",
          "color": "flat-blue",
          "isHot": true,
        },
        {
          "id": 48,
          "name": "LSTM",
          "logo": "L",
          "modelType": "深度学习模型",
          "type": "预测分析",
          "scenarios": ["时序预测", "波动分析"],
          "supportDeployment": true,
          "description": "长短期记忆网络通过精密的门控机制，能够同时捕捉金融时间序列中的短期波动和长期规律，特别擅长处理如汇率、利率变化的复杂非线性动态。",
          "company": "学术界/产业界",
          "versions": "多种变体",
          "color": "flat-red",
          "isHot": true,
        },{
          "id": 51,
          "name": "决策树",
          "logo": "D",
          "modelType": "传统机器学习",
          "type": "分类分析",
          "scenarios": ["分类任务", "规则提取"],
          "supportDeployment": true,
          "description": "基于树状结构进行分类的模型，通过一系列决策规则将数据分割，具有强可解释性，易于理解和实现。",
          "company": "学术界",
          "versions": "多种算法（如ID3、C4.5、CART）",
          "color": "flat-green",
          "isHot": false
        },
        {
          "id": 52,
          "name": "随机森林",
          "logo": "R",
          "modelType": "传统机器学习",
          "type": "分类分析",
          "scenarios": ["分类任务", "回归预测"],
          "supportDeployment": true,
          "description": "集成学习算法，通过构建多棵决策树并投票或平均结果，提高准确性和鲁棒性，防止过拟合。",
          "company": "学术界",
          "versions": "开源",
          "color": "flat-blue",
          "isHot": true
        },
        {
          "id": 53,
          "name": "朴素贝叶斯",
          "logo": "N",
          "modelType": "传统机器学习",
          "type": "分类分析",
          "scenarios": ["文本分类", "情感分析"],
          "supportDeployment": true,
          "description": "基于贝叶斯定理的分类模型，假设特征之间相互独立，计算效率高，适用于大规模文本分类。",
          "company": "学术界",
          "versions": "多种变体（如多项式、高斯）",
          "color": "flat-purple",
          "isHot": false
        },
        {
          "id": 54,
          "name": "线性回归",
          "logo": "L",
          "modelType": "经典统计模型",
          "type": "预测分析",
          "scenarios": ["数值预测", "关系分析"],
          "supportDeployment": true,
          "description": "通过最小化预测值与实际值之间的平方误差，建立自变量和因变量之间的线性关系，用于连续值预测。",
          "company": "学术界",
          "versions": "经典算法",
          "color": "flat-red",
          "isHot": false
        },
        {
          "id": 55,
          "name": "逻辑回归",
          "logo": "G",
          "modelType": "传统机器学习",
          "type": "分类分析",
          "scenarios": ["二分类问题", "概率预测"],
          "supportDeployment": true,
          "description": "用于分类问题的回归方法，通过逻辑函数将线性回归结果映射到概率空间，适用于二分类和多分类任务。",
          "company": "学术界",
          "versions": "经典算法",
          "color": "flat-orange",
          "isHot": true
        },
        {
          "id": 56,
          "name": "主成分分析",
          "logo": "P",
          "modelType": "经典统计模型",
          "type": "降维分析",
          "scenarios": ["数据降维", "特征提取"],
          "supportDeployment": true,
          "description": "无监督的降维方法，通过线性变换将高维数据投影到低维空间，保留最大方差，用于简化数据和可视化。",
          "company": "学术界",
          "versions": "经典算法",
          "color": "flat-teal",
          "isHot": false
        },
        {
          "id": 61,
          "name": "向量自回归(VAR)",
          "logo": "V",
          "modelType": "经典统计模型",
          "type": "多变量预测",
          "scenarios": ["宏观经济分析", "联动分析"],
          "supportDeployment": true,
          "description": "擅长分析多个时间序列变量之间复杂的动态相互作用，无需预先设定变量间的因果关系。",
          "company": "学术界/中央银行",
          "versions": "SVAR, Bayesian VAR",
          "color": "flat-purple",
          "isHot": false
        }
        // 其他模型数据...
      ]
    }
  },
  mounted() {
    this.applyPresetFilter();
  },
  watch: {
    presetFilter(newVal) {
      if (newVal) {
        this.applyPresetFilter();
      }
    }
  },
  computed: {
    // 动态生成模型类型选项
    dynamicModelTypes() {
      const types = [...new Set(this.models.map(model => model.modelType))];
      return types.sort();
    },

    // 动态生成类别选项
    dynamicCategories() {
      const categories = [...new Set(this.models.map(model => model.type))];
      return categories.sort();
    },

    // 动态生成适用场景选项
    dynamicScenarios() {
      const allScenarios = this.models.flatMap(model => model.scenarios);
      const uniqueScenarios = [...new Set(allScenarios)];
      return uniqueScenarios.sort();
    },

    filteredModels() {
      let filtered = this.models;

      // 按模型类型筛选
      if (this.selectedModelTypes.length > 0) {
        filtered = filtered.filter(model => this.selectedModelTypes.includes(model.modelType));
      }

      // 按类别筛选
      if (this.selectedCategories.length > 0) {
        filtered = filtered.filter(model => this.selectedCategories.includes(model.type));
      }

      // 按适用场景筛选
      if (this.selectedScenarios.length > 0) {
        filtered = filtered.filter(model =>
          this.selectedScenarios.some(scenario => model.scenarios.includes(scenario))
        );
      }

      // 按搜索词筛选
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase();
        filtered = filtered.filter(model =>
          model.name.toLowerCase().includes(query) ||
          model.description.toLowerCase().includes(query) ||
          (model.company && model.company.toLowerCase().includes(query)) ||
          model.type.toLowerCase().includes(query) ||
          model.modelType.toLowerCase().includes(query) ||
          model.scenarios.some(scenario => scenario.toLowerCase().includes(query))
        );
      }

      // 按热门程度排序：热门模型在前
      return filtered.sort((a, b) => {
        if (a.isHot && !b.isHot) return -1;
        if (!a.isHot && b.isHot) return 1;
        return 0;
      });
    },
    // 是否有活跃的筛选条件
    hasActiveFilters() {
      return this.selectedModelTypes.length > 0 ||
        this.selectedCategories.length > 0 ||
        this.selectedScenarios.length > 0 ||
        this.selectedProviders.length > 0 ||
        this.searchQuery !== '';
    }
  },
  methods: {
    handleLogin() {
      this.isLoggedIn = true;
      this.$emit('login');
    },
    goToConsole() {
      this.$emit('go-to-console');
    },
    toggleTheme() {
      this.$emit('toggle-theme');
    },
    toggleModelType(type) {
      const index = this.selectedModelTypes.indexOf(type);
      if (index > -1) {
        this.selectedModelTypes.splice(index, 1);
      } else {
        this.selectedModelTypes.push(type);
      }
    },
    toggleCategory(category) {
      const index = this.selectedCategories.indexOf(category);
      if (index > -1) {
        this.selectedCategories.splice(index, 1);
      } else {
        this.selectedCategories.push(category);
      }
    },
    toggleScenario(scenario) {
      const index = this.selectedScenarios.indexOf(scenario);
      if (index > -1) {
        this.selectedScenarios.splice(index, 1);
      } else {
        this.selectedScenarios.push(scenario);
      }
    },
    toggleProvider(provider) {
      const index = this.selectedProviders.indexOf(provider);
      if (index > -1) {
        this.selectedProviders.splice(index, 1);
      } else {
        this.selectedProviders.push(provider);
      }
    },
    applyPresetFilter() {
      if (this.presetFilter && this.presetFilters[this.presetFilter]) {
        const preset = this.presetFilters[this.presetFilter];

        // 重置所有筛选条件
        this.selectedModelTypes = [];
        this.selectedCategories = [];
        this.selectedScenarios = [];
        this.selectedProviders = [];

        // 应用预设筛选条件
        if (preset.selectedModelTypes) {
          this.selectedModelTypes = [...preset.selectedModelTypes];
        }
        if (preset.selectedCategories) {
          this.selectedCategories = [...preset.selectedCategories];
        }
        if (preset.selectedScenarios) {
          this.selectedScenarios = [...preset.selectedScenarios];
        }
        if (preset.selectedProviders) {
          this.selectedProviders = [...preset.selectedProviders];
        }
      }
    },
    // 清除筛选的方法
    clearFilters() {
      this.selectedModelTypes = [];
      this.selectedCategories = [];
      this.selectedScenarios = [];
      this.selectedProviders = [];
      this.searchQuery = '';
    },
    // 获取logo颜色类
    getLogoColorClass(id) {
      const colors = ['flat-blue', 'flat-green', 'flat-orange', 'flat-cyan', 'flat-purple', 'flat-red', 'flat-teal', 'flat-indigo'];
      return colors[id % colors.length];
    },
    // 获取显示的场景标签（最多显示3个）
    getDisplayScenarios(scenarios) {
      return scenarios.slice(0, 3);
    },
    // 处理立即探索按钮点击
    handleExplore(model) {
      console.log('探索模型:', model.name);
      // 跳转到模型详情页
      this.$router.push(`/model-intro/language/detail/${model.id}`);
    },
    // 处理卡片点击
    handleCardClick(model) {
      this.handleExplore(model);
    }
  }
}
</script>

<style scoped>
/* 样式部分 - 针对Chrome 75兼容性修改 */
.model-showcase {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  background-color: #f8fafc;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.model-showcase {
  padding-top: 80px;
}

.page-header {
  background: white;
  border: 1px solid #e5e7eb;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  padding: 40px 20px;
  margin: 0 20px 40px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.page-header h1 {
  font-size: 40px;
  color: #000000;
  margin-bottom: 12px;
  font-weight: 700;
}

.ai-text {
  color: #3b82f6;
}

.page-header p {
  font-size: 20px;
  color: #4b5563;
  margin: 0;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* 修改主要布局容器 - 使用传统浮动和清除浮动替代flexbox */
.main-content {
  display: block;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 20px 40px;
  overflow: hidden; /* 清除浮动 */
}

/* 为左侧边栏使用浮动布局 */
.filter-sidebar {
  width: 280px;
  float: left;
  background: white;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  padding: 20px;
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  margin-right: 24px;
}

.sidebar-section h3 {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e5e7eb;
}

.filter-group {
  margin-bottom: 24px;
}

.filter-group h4 {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
}

/* 修改按钮选项布局 - 使用inline-block替代grid */
.button-options {
  font-size: 0; /* 移除inline-block元素间的空白 */
  margin: -4px;
}

.filter-button {
  display: inline-block;
  width: calc(50% - 8px);
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  background-color: #f9fafb;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  text-align: center;
  margin: 4px;
  vertical-align: top;
  box-sizing: border-box;
}

.filter-button:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

.filter-button.active {
  background-color: #6366f1;
  color: white;
  border-color: #6366f1;
}

.models-container {
  overflow: hidden; /* 创建BFC，避免与浮动元素重叠 */
  background: white;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  padding: 20px;
}

.models-header {
  display: block;
  overflow: hidden;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.models-count {
  font-size: 20px;
  color: #6b7280;
  float: left;
}

.count-number {
  font-weight: 600;
  color: #3b82f6;
  font-size: 22px;
}

.search-box {
  float: right;
}

.search-input-wrapper {
  position: relative;
  display: inline-block;
}

.search-input {
  padding: 12px 16px 12px 40px;
  border: 1px solid #d1d5db;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  width: 300px;
  height: 44px;
  font-size: 16px;
  outline: none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  background-color: white;
  box-sizing: border-box;
}

.search-input:focus {
  border-color: #3b82f6;
  -webkit-box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  -moz-box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  width: 340px;
}

.search-icon {
  position: absolute;
  left: 14px;
  width: 18px;
  height: 18px;
}

.filter-status-bar {
  display: block;
  overflow: hidden;
  background: transparent;
  border: none;
  padding: 0 0 16px 0;
  margin-bottom: 0;
}

.clear-filters-btn {
  display: inline-block;
  background: #ffffff;
  border: 1px solid #d1d5db;
  color: #6b7280;
  padding: 6px 12px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  float: right;
}

.clear-filters-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* 修改模型网格布局 - 使用inline-block替代grid */
.models-grid {
  font-size: 0; /* 移除inline-block元素间的空白 */
  margin: -10px;
}

.model-card {
  display: inline-block;
  vertical-align: top;
  width: calc(33.333% - 20px);
  background: white;
  -webkit-border-radius: 13px;
  -moz-border-radius: 13px;
  border-radius: 13px;
  padding: 18px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid #e5e7eb;
  margin: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
}

.model-card:hover {
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(-2px);
  -moz-transform: translateY(-2px);
  -ms-transform: translateY(-2px);
  -o-transform: translateY(-2px);
  transform: translateY(-2px);
  border-color: #3b82f6;
}

/* 修改卡片右上角标签容器 */
.card-tags-container {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
}

.hot-label {
  background: #ff5000;
  background: -webkit-linear-gradient(135deg, #ff5000, #ffb700);
  background: -moz-linear-gradient(135deg, #ff5000, #ffb700);
  background: -o-linear-gradient(135deg, #ff5000, #ffb700);
  background: linear-gradient(135deg, #ff5000, #ffb700);
  color: white;
  padding: 6px 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  margin-bottom: 8px;
  margin-right: 8px;
}

.deployment-tag {
  background: #dcfce7;
  color: #166534;
  padding: 6px 10px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  display: inline-block;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #bbf7d0;
}

.card-top {
  margin-bottom: 15px;
  padding-right: 100px;
}

.model-header {
  display: block;
  overflow: hidden;
  margin-bottom: 0;
}

.model-basic-info {
  display: block;
  overflow: hidden;
}

.model-logo {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  display: inline-block;
  vertical-align: middle;
  color: white;
  font-size: 35px;
  text-align: center;
  line-height: 50px;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  margin-right: 16px;
}

.model-logo-image {
  width: 50px;
  height: 50px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  display: inline-block;
  vertical-align: middle;
  -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  background: white;
  margin-right: 16px;
}

.model-logo-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.model-title-section {
  display: inline-block;
  vertical-align: middle;
  max-width: calc(100% - 70px);
}

.model-name {
  font-size: 24px;
  font-weight: 400;
  color: #000000;
  line-height: 1.1;
  margin: 0;
}

.card-middle {
  background: #f8fafc;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 12px;
}

.scenarios-tags {
  font-size: 0;
}

.model-type-tag, .scenario-tag {
  display: inline-block;
  background: #ffffff;
  color: #374151;
  padding: 4px 8px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  line-height: 1.2;
  margin: 2px;
  vertical-align: middle;
}

.model-type-tag {
  background: #dbeafe;
  color: #1e40af;
}

.more-scenarios {
  color: #6b7280;
  font-size: 12px;
  padding: 4px 6px;
  display: inline-block;
  vertical-align: middle;
}

.model-description {
  font-size: 17px;
  line-height: 1.4;
  color: #4b5563;
  margin: 0 0 12px 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  height: 4.2em;
}

.description-footer {
  display: block;
  overflow: hidden;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.explore-button {
  background-color: #3b82f6;
  color: white;
  border: none;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
  white-space: nowrap;
  -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  float: right;
}

.explore-button:hover {
  background-color: #2563eb;
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
  -webkit-box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
  -moz-box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

.explore-button:active {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
  -moz-box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.3);
}

/* 颜色类 */
.flat-blue { background-color: #3b82f6; }
.flat-green { background-color: #10b981; }
.flat-orange { background-color: #f59e0b; }
.flat-cyan { background-color: #06b6d4; }
.flat-purple { background-color: #3b82f6; }
.flat-red { background-color: #3b82f6; }
.flat-teal { background-color: #14b8a6; }
.flat-indigo { background-color: #6366f1; }

.no-results {
  text-align: center;
  padding: 60px 20px;
}

.no-results-content h3 {
  font-size: 20px;
  color: #374151;
  margin: 16px 0 8px;
}

.no-results-content p {
  color: #6b7280;
  margin-bottom: 20px;
}

.clear-filters-btn.large {
  padding: 10px 20px;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .model-card {
    width: calc(50% - 20px);
  }
}

@media (max-width: 1200px) {
  .model-card {
    width: calc(100% - 20px);
  }
}

@media (max-width: 768px) {
  .model-showcase {
    padding-top: 70px;
  }

  .main-content {
    padding: 0 15px 30px;
  }

  .filter-sidebar {
    width: 100%;
    float: none;
    position: static;
    margin-right: 0;
    margin-bottom: 24px;
  }

  .models-header {
    text-align: center;
  }

  .models-count {
    float: none;
    margin-bottom: 10px;
  }

  .search-box {
    float: none;
    display: inline-block;
  }

  .search-input {
    width: 100%;
  }

  .model-basic-info {
    text-align: center;
  }

  .model-logo,
  .model-logo-image {
    display: block;
    margin: 0 auto 10px;
  }

  .model-title-section {
    display: block;
    max-width: 100%;
  }

  .explore-button {
    float: none;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .page-header {
    padding: 30px 15px;
    margin: 0 15px 30px;
  }

  .page-header h1 {
    font-size: 28px;
  }

  .model-card {
    padding: 22px;
  }

  .button-options {
    margin: -2px;
  }

  .filter-button {
    width: calc(50% - 4px);
    margin: 2px;
  }
}

:deep(.navbar) {
  /* 确保 NavBar 样式不被覆盖 */
}

:deep(.footer) {
  /* 确保 Footer 样式不被覆盖 */
}
</style>
